<template>
  <div class="videoIndexComp">
<!--    <goback :title="''"></goback>-->
    <van-swipe
      @change="swipeChange"
      :show-indicators="false"
      :vertical="true"
      :loop="false"
      :initial-swipe="initialSwipeIndex"
    >
      <van-swipe-item
        v-for="(item, index) in list"
        @click.stop="videoPP(index)"
      >
        <video
          loop
          class="videodom"
          :poster="item.videoIcon"
          :id="'video' + index"
          :src="item.videoUrl"
        ></video>
        <img
          class="videoPlayBtn"
          v-if="!ifVideoPlaying"
          :src="playBtn"
          alt=""
        />
        <div v-show="currnetPGIndex == index" class="bottom">
          <p>@ {{ item.nickName }}</p>
          <span>{{ item.desc }}</span>
        </div>
        <div v-show="currnetPGIndex == index" class="right">
          <div class="rightli top">
            <img
              :src="
                item.userHeadPortrait ? item.userHeadPortrait : userDefaultPic
              "
              alt=""
            />
          </div>
          <div class="rightli">
            <img
              v-if="!item.like"
              @click.stop="dianzanFn(item.videoId, index)"
              :src="heart"
              alt=""
            />
            <img
              v-if="item.like"
              @click.stop="returnNull"
              :src="heartAct"
              alt=""
            />
            <span style="text-align: center" class="_txtov1">{{
              item.likeCount
            }}</span>
          </div>
          <div class="rightli" v-if="false">
            <img @click.stop="shareFn" :src="share" alt="" />
          </div>
        </div>
        <div
          v-show="currnetPGIndex == index"
          class="rightbottom"
          @click.stop="clickRecodeVideo"
        >
          <img :src="camera" alt="" />
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import { ifLogin, utilGotoLogin } from "@/utils/index.js";
import { mapState } from "vuex";
import videoController from "../../../api/video-controller/video-controller";

export default {
  name: "videoIndexComp",
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      }
    },
    currentName: {
      type: String,
      default: ""
    },
    pageSize: {
      type: Number,
      default: 5
    },
    currPage: {
      type: Number,
      default: 1
    },
    totalItem: {
      type: Number,
      default: 0
    }
  },
  watch: {
    currentName(newVal, oldVal) {
      console.log(newVal);
      if (newVal == "reco") {
        console.log("reco");
      }
    }
  },
  data() {
    return {
      userDefaultPic: require("@/assets/imgs/index/defaultPic.png"),
      camera: require("@/assets/imgNews/video/camera.png"),
      heart: require("@/assets/imgNews/video/heart.png"),
      heartAct: require("@/assets/imgNews/video/heartAct.png"),
      share: require("@/assets/imgNews/video/share.png"),
      playBtn: require("@/assets/imgNews/video/videoPlayBtn.png"),
      currentPlayIndex: -1,
      currnetPGIndex: 0,
      ifVideoPlaying: false,
      initialSwipeIndex: 0 //初始位置索引值
      // swiperShow: true
    };
  },
  computed: mapState({
    // 箭头函数可使代码更简练
    userStoreData: state => state.user,
    radius() {
      return 50 - 6 / 2;
    }
  }),
  watch: {
    // "list.length"(newVal, oldVal) {
    //   if (oldVal != 0 && newVal > 0) {
    //     this.swiperShow = true;
    //   }
    // }
  },
  created() {},
  methods: {
    returnNull() {
      return;
    },
    dianzanFn(videoId, index) {
      let zs = this;
      if (!ifLogin()) {
        utilGotoLogin();
      } else {
        console.log("点赞");
        zs.api.videoController
          .videoDoLike({
            userId: zs.userStoreData.userId,
            videoId: videoId
          })
          .then(res => {
            if (res.data.code == 200) {
              zs.list[index].likeCount++;
              zs.list[index].like = true;
            } else {
              zs.$toast(res.data.info);
            }
          });
      }
    },
    shareFn() {
      if (!ifLogin()) {
        utilGotoLogin();
      } else {
        console.log("分享");
        alert("开发中..");
      }
    },
    // 打开相机录像
    clickRecodeVideo() {
      if (!ifLogin()) {
        utilGotoLogin();
      } else {
        if (window.StepSDK) {
          window.StepSDK.recordVideo(this.userStoreData.userId+','+this.userStoreData.token);
        }
      }
    },
    swipeChange(index) {
      let videoAll = document.querySelectorAll("video");
      for (let i = 0; i < videoAll.length; i++) {
        videoAll[i].pause();
      }
      let targetref = document.querySelector("#video" + index);
      // console.log(targetref)
      this.currnetPGIndex = index;
      if (index == this.currentPlayIndex) {
        if (targetref.pause) {
          targetref.pause();
          this.currentPlayIndex = -1;
          this.ifVideoPlaying = false;
        }
      } else {
        if (targetref.play) {
          targetref.play();
          this.ifVideoPlaying = true;
          this.currentPlayIndex = index;
        }
      }

      // console.log(index);
      if (
        this.totalItem > this.pageSize * this.currPage &&
        this.totalItem > this.list.length &&
        this.pageSize * this.currPage - index == 1
      ) {
        this.initialSwipeIndex = index;
        this.$emit("_getMoreVideo");
        // setTimeout(()=>{
        //   swipeTo({index});
        // },0)
      }
    },
    videoPP(index) {
      this.swipeChange(index);
    }
  },
  beforeDestroy() {
    let videoAll = document.querySelectorAll("video");
    for (let i = 0; i < videoAll.length; i++) {
      videoAll[i].pause();
    }
    this.ifVideoPlaying = false;
  }
};
</script>

<style scoped lang="less">
.clearfix {
  zoom: 1;
}
.clearfix:after {
  content: "";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}
.circle_container {
  width: 100%;
  height: 100%;
  position: relative;
}
.videoIndexComp {
  height: calc(100vh - 1rem);
  //background: linear-gradient(180deg, #00b1ff 0%, #0089ff 100%);
  //background: rgba(226, 226, 226, 0.42);
  background: rgb(36, 33, 56, 0.51);
  .van-swipe {
    height: 100%;
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
    top: 0;
  }
  .van-swipe-item {
    position: relative;
    color: #000;
    .videodom {
      width: 7.2rem;
      height: calc(100vh - 1rem);
      background-color: rgba(0, 0, 0, 0.4);
      object-fit: cover;
    }
    .videoPlayBtn {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 1rem;
      height: 1rem;
      object-fit: cover;
    }
    .bottom {
      position: absolute;
      left: 0.3rem;
      top: calc(100vh - 1rem - 1.23rem);
      width: 7.2rem;
      height: 4rem;
      padding-right: 3rem;
      box-sizing: border-box;
      color: #fff;
      p {
        font-size: 0.3rem;
        font-weight: bold;
        margin-bottom: 0.17rem;
      }
      span {
        display: block;
        width: 5.46rem;
        overflow: hidden;
        height: 0.33rem;
        font-size: 0.24rem;

        font-weight: bold;
        line-height: 0.33rem;
        color: #f5f5f5;
        text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.6);
        opacity: 1;
      }
    }
    .rightbottom {
      position: absolute;
      right: 0.4rem;
      top: calc(100vh - 1rem - 1.9rem);
      img {
        width: 0.61rem;
        height: 0.61rem;
        cursor: pointer;
      }
    }
    .right {
      position: absolute;
      right: 0.3rem;
      //top: calc(100vh - 1rem - 6.9rem);
      top: calc(100vh - 1rem - 5.7rem);
      .rightli {
        padding: 0 0.1rem;
        margin-bottom: 0.5rem;
        display: flex;
        justify-content: end;
        flex-direction: column;
        &.top {
          padding: 0;
          margin-bottom: 0.5rem;
          img {
            width: 0.8rem;
            height: 0.8rem;
            border-radius: 50%;
            box-shadow: 0 0 5px #fff;
            box-shadow: 0 0 2px #fff;
          }
        }
        img {
          width: 0.6rem;
          height: 0.6rem;
          border-radius: 50%;
        }
        span {
          font-size: 0.15rem;
          color: rgba(255, 255, 255, 1);
          text-align: right;
          width: 0.6rem;
          display: block;
          margin-top: 0.06rem;
          text-wrap: unset;
        }
      }
    }
  }
}
</style>
